<template>
  <a-tabs v-model="tabsActive" @change="tabChange">
    <a-tab-pane
      v-for="item in props.tabList"
      :key="item.value"
      :title="item.label"
    >
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>
  import { ref, defineProps, watch, defineEmits } from 'vue';

  const emit = defineEmits(['change']);
  const props = defineProps({
    value: {
      type: String,
      default: '',
    },
    tabList: {
      type: Array<any>,
      default: () => [],
    },
  });
  const tabsActive = ref('2');
  const tabChange = (val) => {
    console.log(val, '000');
    emit('change', val);
    console.log(tabsActive.value, 'tabsActive.value');
  };
  watch(
    () => props.value,
    () => {
      tabsActive.value = props.value;
    },
    {
      immediate: true,
    }
  );
</script>

<style lang="less" scoped>
  :deep(.arco-tabs-nav-type-line .arco-tabs-tab) {
    margin: 0;
    padding: 12px 16px !important;
  }

  :deep(.arco-badge-number) {
    color: #1e2228;
    background-color: #e4e7ed !important;
  }

  :deep(.arco-tabs-tab-active) {
    color: #1e89ff;

    .arco-badge-number {
      color: rgb(255 255 255 / 90%);
      background-color: #1e89ff !important;
    }
  }
</style>
